<template>
  <div class="toolbar-popup-con">
    <keep-alive>
      <component v-show="isShow" :is="comname"></component>
    </keep-alive>
  </div>
</template>

<script>
import Bus from "@/js/EventBus";
import LayerPopup from "@/components/toolbarpopup-model/LayerPopup.vue";
import MarkerPopup from "@/components/toolbarpopup-model/MarkerPopup.vue";
import GroundTranPopup from "@/components/toolbarpopup-model/GroundTranPopup.vue";
import FlyPopup from "@/components/toolbarpopup-model/FlyPopup.vue";
export default {
  name: "toolbarPopup",
  computed: {
    mapshow() {
      return this.$store.getters.mapshow;
    },
  },
  watch: {
    mapshow(newval, oldval) {
      // this.isShow=newval
      // this.doSetIsShow()
    },
  },
  components: {
    //  如果在声明组件名称的时候 没有为组件声明name 名称 默认就是注册的名称
    LayerPopup,
    MarkerPopup,
    GroundTranPopup,
    FlyPopup,
  },
  data() {
    return {
      toolbarList: {},
      comname: "LayerPopup",
      isShow: false,
    };
  },

  mounted() {
    Bus.$on("Layers", (e) => {
      this.showLayers(e);
    });
    Bus.$on("doMark", (e) => {
      this.showMarkerLayer(e);
    });
    Bus.$on("GroundTran", (e) => {
      this.showGroundTranLayer(e);
    });
    Bus.$on("Fly", (e) => {
      this.showFlyLayer(e);
    });
    Bus.$on("dosetmethodes", (e) => {
      this.doSetIsShowPopup();
    });

    //设置已经显示的工具弹框为隐藏
    Bus.$off("setToolBarPopupIsShow");
    Bus.$on("setToolBarPopupIsShow", this.doSetIsShow);
  },

  methods: {
    showLayers(e) {
      this.comname = "LayerPopup";
      this.isShow = e;
    },
    showMarkerLayer(e) {
      this.comname = "MarkerPopup";
      this.isShow = e;
    },
    showFlyLayer(e) {
      this.comname = "FlyPopup";
      this.isShow = e;
      console.log("FlyPopup", e);
    },
    showGroundTranLayer(e) {
      this.comname = "GroundTranPopup";
      this.isShow = e;
    },

    doSetIsShowPopup() {
      this.isShow = false;
      //设置工具条状态
      Bus.$emit("setToolBarStatus");
    },

    doSetIsShow() {
      this.isShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.toolbar-popup-con {
  z-index: 999;
  width: auto;
  height: auto;
  position: absolute;
  top: 130px;
  left: 20px;
  background-color: red;
  width: 301px;
  color: #ffffff;
  background: url("@/assets/panelTree/dtml_bg.png") no-repeat;
  background-size: 90% 100%;
}
</style>
